<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* Echarts (https://github.com/apache/echarts)
* ECharts-GL (https://github.com/ecomfe/echarts-gl)
*********************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_colorfulCity"></title>
    <script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
    <script type="text/javascript" include="echarts,echarts-gl" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script>
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, myChart,
        mapUrl = host + "/iserver/services/map-china/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}",
        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            "| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
            "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts Echarts-gl</a>";

    myChart = echarts.init(document.getElementById("map"));
    myChart.showLoading();
    $.getJSON('../data/colorfulCityData.json', function (buildingsGeoJSON) {

        echarts.registerMap('buildings', buildingsGeoJSON);

        myChart.hideLoading();

        var regionsData = buildingsGeoJSON.features.map(function (feature) {
            return {
                name: feature.properties.name,
                value: Math.random(),
                height: +feature.properties.height * 10
            };
        });

        myChart.setOption({
            visualMap: {
                show: false,
                min: 0.4,
                max: 1,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            mapbox: {
                center: [13.409779, 52.520645],
                zoom: 13,
                pitch: 50,
                bearing: -10,
                style: {
                    "version": 8,
                    "sources": {
                        "raster-tiles": {
                            "attribution": attribution,
                            "type": "raster",
                            "tiles": [mapUrl],
                            "tileSize": 256
                        }
                    },
                    "layers": [{
                        "id": "simple-tiles",
                        "type": "raster",
                        "source": "raster-tiles",
                    }]
                },
                postEffect: {
                    enable: true,
                    SSAO: {
                        enable: true,
                        intensity: 1.3,
                        radius: 5
                    },
                    screenSpaceReflection: {
                        enable: false
                    },
                    depthOfField: {
                        enable: true,
                        blurRadius: 4,
                        focalDistance: 90
                    }
                },
                light: {
                    main: {
                        intensity: 3,
                        alpha: -40,
                        shadow: true,
                        shadowQuality: 'high'
                    },
                    ambient: {
                        intensity: 0.
                    },
                    ambientCubemap: {
                        texture: '../data/ambientCubemapTexture.hdr',
                        exposure: 1,
                        diffuseIntensity: 0.5,
                        specularIntensity: 1
                    }
                }
            },
            series: [{
                type: 'map3D',
                coordinateSystem: 'mapbox',
                map: 'buildings',
                data: regionsData,
                shading: 'realistic',
                instancing: true,
                silent: true,
                itemStyle: {
                    areaColor: '#fff'
                },
                realisticMaterial: {
                    metalness: 0,
                    roughness: 0.0
                }
            }]
        });

        myChart.getModel().getComponent('mapbox3D').getMapbox().addControl(new mapboxgl.NavigationControl(), 'top-left');
    });
</script>

</body>
</html>